<template>
  <!-- 标题 -->
  <van-nav-bar title="我的" class="nav" />

  <!-- 头像 -->
  <van-image
    round
    width="8rem"
    height="8rem"
    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
    class="tou"
  />

  <!-- <van-uploader :after-read="afterRead" /> -->
  <!-- <van-uploader :after-read="afterRead" v-model="fileList" reupload max-count="1" /> -->

  <!-- 卡片 -->
  <van-cell-group inset class="card">
    <van-cell title="昵称" value="Moon" />
    <van-cell title="收货地址" value="中国" label="河南省郑州市..." />
    <van-cell title="路由跳转" is-link to="/userInfo">
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <van-icon name="setting-o" />&nbsp;
        <span class="custom-title">设置</span>
      </template>
    </van-cell>
  </van-cell-group>
  <!-- 退出按钮 -->
  <van-button color="#ee0a24" class="out" block @click="outFn">退出</van-button>
</template>
<script setup>
import { ref } from "vue"
import { showToast } from "vant"
import { useRouter } from "vue-router"
import { infoRequest } from "@/api/user"
// 上传图片
// const afterRead = (file) => {
//   // 此时可以自行将文件上传至服务器
//   console.log(file)
//   console.log(file.objectUrl)
// }
// let fileList = ref()

// 头像
let token = localStorage.getItem("user-token")
let img = ref()
let data = ref()
infoRequest(token).then((r) => {
  console.log(r.data)
  data = r.data.data
  console.log(data)
  img.value = r.data.data.avatar
  console.log(img.value)
})
let router = useRouter()
// 退出清空本地的token
function outFn() {
  localStorage.removeItem("user-token")
  localStorage.removeItem("user-Name")
  showToast({
    message: "退出登录成功啦",
    icon: "like-o",
  })
  router.push("/")
}
</script>
<style lang="css" scoped>
.nav {
  color: white;
}
.tou {
  margin-top: 10px;
  margin-left: 20px;
}
.card {
  margin-top: 10px;
}
.out {
  width: 345px;
  margin-top: 50px;
  margin: 0 auto;
}
</style>
